<!-- 插值语法 可以理解为一段js区域 -->
<p>hello {{name + ' 你好'}}</p>
<p>{{1 + 1}}</p>
<p>{{true ? '1' : name}}</p>
<p>{{dateStr}}</p>

<!--属性绑定-->
<div id="box">属性绑定1</div>
<div [id]="'box'">属性绑定2</div>
<div [id]="box">属性绑定3</div>

<div><h3 [class.h3-dom]="h3Dom">你好，我display</h3></div>
<div><h3 [class.h4-dom]="'false'">你好，这种写法无效</h3></div>
<div><h3 [class]="{'h3-dom':true, 'title-dom':false}">你好</h3></div>
<div><h3 [class]="['h3-dom', 'title-dom']">class数组渲染</h3></div>
<div><h3 [ngClass]="{'active':isActive}">ngClass绑定</h3></div>

<div><h3 [style.width]="'300px'">单一样式绑定1</h3></div>
<div><h3 [style.width.px]="'300'">单一样式绑定2</h3></div>
<div><h3 [style.color]="'red'">单一样式绑定3</h3></div>

<div><h3 [style]="'background:red; color:#fff'">多样式绑定1</h3></div>
<div><h3 [style]="{'background':'red', 'color':'#fff'}">多样式绑定2</h3></div>
<div><h3 [ngStyle]="{'font-size': disF ? '12px' : '24px'}">多样式绑定2</h3></div>

<!--条件判断-->
<div *ngIf="isActive">{{isActive}}显示出来</div>
<div *ngIf="!isActive">{{isActive}}取反出来</div>

<ng-template [ngIf]="isActive">
  <div>{{isActive}}也显示出来</div>
</ng-template>

<ng-template [ngIf]="!isActive">
  <div>{{isActive}}也隐藏</div>
</ng-template>

<!--if判断-->
<ng-container *ngIf="isActive; else elseTemplate">
  <div>{{isActive}}显示出来</div>
</ng-container>
<ng-template #elseTemplate>
  <div>{{isActive}}取反显示出来</div>
</ng-template>

<!--循环通常写法 odd=是否奇数-->
<div *ngFor="let item of colors let in=index let isOdd=odd">
  {{in}}
  {{isOdd}}
  {{item}}
</div>
<!--编译之后的结果-->
<ng-template ngFor let-item [ngForOf]="colors" let-in="index" let-isOdd="odd">
  <div>
    {{in}}
    {{isOdd}}
    {{item}}
  </div>
</ng-template>

<!--switch用法-->
<div [ngSwitch]="type">
  <p *ngSwitchCase="1">
    type:1
  </p>
  <p *ngSwitchCase="2">
    type:2
  </p>
  <p *ngSwitchDefault>
    type:1 && type:2
  </p>
</div>

<!--事件绑定-->
<input type="text" (input)="inChange($event)" name="" id="" />
<button (click)="clickFun($event)">点击</button>
<hr/>
<input type="text" #username placeholder="请输入用户名" />
<button (click)="getUserName(username.value)">获取输入值</button>
<hr/>

<!--双向数据绑定 只对表单元素有效-->
<input [(ngModel)]="title" type="text" />
<p>title:{{title}}</p>
<hr />

年龄：<input type="text" [formControl]="age" />
<br/>
<p>年龄：{{age.value}}</p>
<button (click)="ageChange()">年龄增大</button>
<hr />

<!--动态表单控件组-->
<form [formGroup]="loginForm" >
  <label>
    账号：
    <input type="text" formControlName="userName" />
  </label>
  <label>
    密码：
    <input type="password" formControlName="password" />
  </label>
  <button (click)="submitForm()">提交</button>
</form>
<br/>

<!---表单验证-->
<form action="">
  账号：<input required #nameInp="ngModel" type="text" [(ngModel)]="formData.name" name="userName" />
  <!--  <span>{{nameInp.valid}}</span>-->
  <span *ngIf="!nameInp.valid">请输入账号</span>
  <br/>
  密码：<input required #pasInp="ngModel" type="password" [(ngModel)]="formData.password" name="password" />
  <!--  <span>{{pasInp.valid}}</span>-->
  <span *ngIf="!pasInp.valid">请输入账号</span>
  <br/>
  <button (click)="submitFun()">提交</button>
</form>
<br/>

<!---自定义表单验证-->
<form [formGroup]="validateForm">
  <label>账号：<input type="text" formControlName="userName" /></label>
  <span *ngIf="validateForm.get('userName')?.errors?.hasOwnProperty('required')">请输入账号</span>
  <p *ngIf="validateForm.get('userName')?.errors?.hasOwnProperty('minlength')
  || validateForm.get('userName')?.errors?.hasOwnProperty('maxlength')">账号长度在6-18位之间</p>
  <br/>
  <label>密码：<input type="password" formControlName="passWord" /></label>
  <span *ngIf="validateForm.get('passWord')?.errors?.hasOwnProperty('msg')">
    {{validateForm.get('passWord')?.errors?.['msg']}}
  </span>
  <br/>
  <label>手机号：<input type="text" formControlName="phone" /></label>
  <span *ngIf="validateForm.get('phone')?.errors?.hasOwnProperty('msg')">
    {{validateForm.get('phone')?.errors?.['msg']}}
  </span>
  <br/>
  <button (click)="submitValidate()">提交</button>
</form>
<br/>

<!--管道-->
{{dateStr | date:'yyyy-MM-dd HH:mm:ss'}}
{{name | uppercase | lowercase }}
{{'你好' | append:'张三':'同学'}}
